import React from "react";

interface SideListProps{
    title: string;
    targetId: string;
    collapseName: string;
    dataParent: string;
    cardHeading: string;
    maxHight?: string;
    children?: React.ReactElement | string;
};  

function SideList(props: SideListProps){

    const { title, targetId, collapseName, dataParent, children, maxHight, cardHeading } = props;

    return (

        <div className="card bg-dark overflow-auto user" style={{maxHeight: maxHight ? maxHight : "80vh"}}>
            <div className="card-header p-0" id={cardHeading}>
                <button className="btn btn-link btn-block text-left collapsed" 
                    type="button" data-toggle="collapse" 
                    data-target={`#${targetId}`} aria-expanded="false" 
                    aria-controls={targetId}
                >
                    { title }
                </button>
            </div>

            <div id={targetId} className={collapseName} 
                aria-labelledby={cardHeading} data-parent={`#${dataParent}`}
                >
                <div className="card-body text-light">
                    {children}
                </div>
            </div>

        </div>
    );
}

export default SideList;